<template>
    <div class="detail">
        <div class="in">
            <!-- 头部 -->
            <div>
                <div class="box"></div>
                <i style="font-size: 16px; color: black">签约详情</i>
            </div>
            <table>
                <tr>
                    <td>居民信息</td>
                </tr>
                <tr>
                    <td><span>姓名</span> {{resident.name}}</td>
                    <td><span>身份证号</span> {{resident.id}}</td>
                    <td><span>性别</span> {{resident.sex}}</td>
                    <td><span>年龄</span> {{resident.age}}</td>
                </tr>
                <tr>
                    <td><span>联系电话</span> {{resident.phone}}</td>
                    <td><span>现居地</span> {{resident.address}}</td>
                    <td></td>
                    <td><span>居民标签</span> {{resident.title}}</td>
                </tr>
                <tr>
                    <td colspan="4">
                        <div class="box3">
                        <span class="font">家庭成员</span>
                        <div><img src="../../../assets/liqing.png" alt=""></div>
                        <div><img src="../../../assets/wanglin.png" alt=""></div>
                        <span class="family">+关联家庭成员</span>
                    </div>
                    </td>
                </tr>
                <tr>
                    <td>签约信息</td>
                </tr>
                <tr>
                    <td><span>签约编号</span> {{contract.id}}</td>
                    <td><span>签约状态</span> {{contract.state}}</td>
                    <td><span>签约机构</span> {{contract.mechanism}}</td>
                    <td><span>签约团队</span> {{contract.team}}</td>
                </tr>
                <tr>
                    <td><span>签约医生</span> {{contract.doc}}</td>
                    <td><span>服务包</span> {{contract.doc}}</td>
                    <td><span>签约周期</span> {{contract.cycle}}</td>
                    <td><span>费用</span> {{contract.pay}}</td>
                </tr>
                <tr>
                    <td><span>签约类型</span> {{contract.type}}</td>
                    <td><span>申请时间</span> {{contract.time}}</td>
                    <td><span>生效日期</span> {{contract.effective}}</td>
                    <td><span>到期日期</span> {{contract.effective}}</td>
                </tr>
                <tr>
                    <td><span>审核人</span> {{contract.people}}</td>
                    <td><span>审核时间</span> {{contract.shsj}}</td>
                    <td><span>支付时间</span> {{contract.zfsj}}</td>
                    <td><span>支付方式</span> {{contract.zffs}}</td>
                </tr>
                <tr>
                    <td><span>签约备注</span> {{contract.remarks}}</td>
                </tr>
                <tr>
                    <td clospan="4" class="btn">
                        <!-- button -->
                        <el-button type="primary" @click="handleClick">续约</el-button>
                        <el-button @click="handleReturn">返回</el-button>
                    </td>
                </tr>
            </table>

            
        </div>
    </div>
</template>

<script lang="ts" setup>
import router from '../../../router'
import { ref } from 'vue'
const resident = ref({
    name: '王安然',
    id: '371456198908090543',
    sex: '女',
    age: 26,
    phone: '18664308600',
    address: '怀柔区洛西县建设路青莲小区6-601',
    title: '高血糖 冠心病',
    family: '李清 王林'
})

const contract = ref({
    id: '20190009091',
    state: '生效中',
    mechanism: '洛西社区卫生服务站',
    team: '李明明团队',
    doc: '老人服务包',
    cycle: '1年',
    pay: '￥120',
    type: '首次签约',
    time: '2020/10/09 10:09:09',
    effective: '2020/10/09',
    remarks: '无',
    people: '王彬',
    shsj: '2020/10/09 10:09:09',
    zfsj: '2020/10/09 10:09:09',
    zffs: '微信方式'

})

const handleClick = () => {
    router.push('/recontract/reedit')
}
const handleReturn = () => {
    router.push('/contract/reindex')
}
</script>

<style scoped>
.detail {
    padding: 0 60px;
    background-color: rgb(242, 247, 251);
    font-size: 14px;

}


.in {
    background-color: rgb(255, 255, 255);
    min-width: 800px;
    padding: 20px;
}

.box {
    display: inline-block;
    width: 6px;
    height: 20px;
    background-color: rgba(41, 132, 248, 1);
    border-radius: 8px;
    margin-right: 10px;
}
span {
    font-size: 14px;
    color: rgb(153, 153, 153);
    margin-right: 18px;
}
td {
    padding: 16px;
}
.btn {
    display: flex;
}
.box3 {
    display: flex;
    margin-bottom: 24px;
}
.family {
    color: rgb(41, 132, 248);
    display: block;
    width: 110px;
    height: 18px;
    margin-top: 28px;
}

.family:hover {
    border-bottom: 1px solid rgb(41, 132, 248);
}
</style>
